
<template>
    <div class="admin">
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="username" label="Username"></el-table-column>
        <el-table-column prop="email" label="Email"></el-table-column>
        <el-table-column label="Actions">
          <template #default="scope">
            <el-button type="danger" @click="confirmDelete(scope.row.id)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useUserStore } from '@/stores/userStore';
  import { ElMessageBox } from 'element-plus';
  import axios from 'axios'
  
  const userStore = useUserStore();
  const users = ref([]);
  
  onMounted(async () => {
    try {
      users.value = await userStore.fetchUsers();
    } catch (error) {
      ElMessageBox.alert('Failed to fetch users', 'Error', { type: 'error' });
    }
  });
  
  
  const confirmDelete = (userId) => {
    ElMessageBox.confirm('Are you sure you want to delete this user?', 'Confirm', {
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        type: 'warning',
    }).then(() => {
        deleteUser(userId);
    }).catch(() => {
        // 处理取消操作
    });
};

const deleteUser = async (userId) => {
  try {
    await axios.delete(`/api/users/${userId}`);
    users.value = await userStore.fetchUsers();
  } catch (error) {
    ElMessageBox.alert(
        'Login failed: ' + (error.response?.data?.message || 'Unknown error'),
        'Login Error',
        { type: 'error' }
        );
    
  }
};
  </script>
  
  <style>
  /* 添加 CSS 样式 */
  .admin {
    /* 样式代码 */
  }
  </style>
  